<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib uri="http://jsptags.com/tags/navigation/pager" prefix="pg"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>

<!DOCTYPE html>
<html>ss

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="renderer" content="webkit">

    <title>数据表格</title>
    <meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
    <meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
	<link rel="shortcut icon" href="<%=path%>/images/favicon.ico" type="image/x-icon">
    <link href="<%=path%>/css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
    <link href="<%=path%>/font-awesome/css/font-awesome.css?v=4.3.0" rel="stylesheet">

    <!-- Data Tables -->
    <link href="<%=path%>/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">

    <link href="<%=path%>/css/animate.css" rel="stylesheet">
    <link href="<%=path%>/css/style.css?v=2.2.0" rel="stylesheet">

</head>

<body>
    <div id="wrapper">
        <jsp:include page="/common/left"></jsp:include>

        <div id="page-wrapper" class="gray-bg dashbard-1">
           <jsp:include page="/common/header"></jsp:include>
            <div class="row wrapper border-bottom white-bg page-heading">
                <div class="col-lg-10">
                    <h2>菜单列表</h2>
                    <ol class="breadcrumb">
                        <li>
                            <a href="index.html">主页</a>
                        </li>
                        <li>
                            <a>菜单</a>
                        </li>
                        <li>
                            <strong>菜单列表</strong>
                        </li>
                    </ol>
                </div>
                <div class="col-lg-2">

                </div>
            </div>
            <div class="wrapper wrapper-content animated fadeInRight">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>基本 <small>分类，查找</small></h5>
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                    <a class="close-link">
                                        <i class="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="ibox-content">
							<pg:pager items="${pagerModel.totalResults}" index="center"
										maxPageItems="${pagerModel.pageSize}" maxIndexPages="4" maxItems="10"
										url="menuList"
										export="pageOffset,currentPageNumber=pageNumber" scope="request">
									<form id="tableForm" method="post" action="">	
	                                <table class="table table-striped table-bordered table-hover">
	                                    <thead>
	                                        <tr>
	                                            <th>id</th>
	                                            <th>名称</th>
	                                            <th>描述</th>
	                                            <th>排序</th>
	                                            <th>图片地址</th>
	                                            <th>操作</th>
	                                        </tr>
	                                    </thead>
	                                    <tbody>
	                                    	<c:forEach items="${pagerModel.result}" var="list">
	                                    		<tr>
	                                    			<td>${list.menuId }</td>
	                                    			<td>${list.menuName }</td>
	                                    			<td>${list.describes }</td>
	                                    			<td>${list.sort }</td>
	                                    			<td>${list.imgurl }</td>
	                                    			<td>${list.menuId }</td>
	                                    		</tr>
	                                    	</c:forEach>
	                                    </tbody>
	                                </table>
	                                <div class="row">
	                                	<div class="col-sm-6">
	                                		<div class="dataTables_info" id="DataTables_Table_0_info" role="alert" aria-live="polite" aria-relevant="all">
	                                			${pagerModel.message }
	                                			
	                                		</div>
	                                	</div>
	                                	<div class="col-sm-6">
	                                		<div class="dataTables_paginate paging_full_numbers" id="DataTables_Table_0_paginate">
	                                			<ul class="pagination">
	                                				<pg:first export="firstPageUrl=pageUrl" unless="current">
														<li class="paginate_button first active" aria-controls="DataTables_Table_0" tabindex="0" id="DataTables_Table_0_first">
															<a href="${firstPageUrl }">首页</a>
														</li>
													</pg:first> 
													
	                                				 <pg:prev export="prevPageUrl=pageUrl">
	                                					 <li class="paginate_button previous active" aria-controls="DataTables_Table_0" tabindex="0" id="DataTables_Table_0_previous">
															<a href="${prevPageUrl }">&laquo;&nbsp;上一页</a>
														</li>
													</pg:prev>
															
													<pg:pages>   
													    <c:choose>   
													      <c:when test="${currentPageNumber eq pageNumber}">
														      <li class="paginate_button disabled" aria-controls="DataTables_Table_0" tabindex="0">
														        <a href="javascript:void(0)"><font color="red">${pageNumber }</font> </a>
														      </li>  
													      </c:when>   
													      <c:otherwise>   
														      <li class="paginate_button active" aria-controls="DataTables_Table_0" tabindex="0">
														        <a href="${pageUrl }">${pageNumber }</a>   
													           </li>
													      </c:otherwise>   
													    </c:choose>   
												  </pg:pages>   
												  
												  
													<pg:next export="nextPageUrl=pageUrl" >
														 <li class="paginate_button active" aria-controls="DataTables_Table_0" tabindex="0" id="DataTables_Table_0_next"sss>
															<a href="${nextPageUrl }">下一页&nbsp;&raquo;</a>
														</li>
													</pg:next> 
													<pg:last export="lastPageUrl=pageUrl" unless="current">
														<li class="paginate_button last active" aria-controls="DataTables_Table_0" tabindex="0" id="DataTables_Table_0_last">
															<a href="${lastPageUrl }">尾页</a>
														</li>
													</pg:last>
													
	                                				<!-- <li class="paginate_button first disabled" aria-controls="DataTables_Table_0" tabindex="0" id="DataTables_Table_0_first">
	                                					<a href="#">首页</a>
	                                				</li> -->
	                                				
															
<!-- 	                                				<li class="paginate_button previous disabled" aria-controls="DataTables_Table_0" tabindex="0" id="DataTables_Table_0_previous"> -->
<!-- 	                                					<a href="#">前一页</a> -->
<!-- 	                                				</li> -->
													
													
													
													
	                                				<!-- <li class="paginate_button active" aria-controls="DataTables_Table_0" tabindex="0">
	                                					<a href="#">1</a></li>
	                                				<li class="paginate_button " aria-controls="DataTables_Table_0" tabindex="0">
	                                					<a href="#">2</a></li>
	                                				<li class="paginate_button " aria-controls="DataTables_Table_0" tabindex="0">
	                                					<a href="#">3</a>
	                                				</li><li class="paginate_button " aria-controls="DataTables_Table_0" tabindex="0">
	                                					<a href="#">4</a></li>
	                                				<li class="paginate_button " aria-controls="DataTables_Table_0" tabindex="0"><a href="#">5</a></li>
	                                				<li class="paginate_button disabled" aria-controls="DataTables_Table_0" tabindex="0" id="DataTables_Table_0_ellipsis">
	                                					<a href="#">…</a></li>
	                                				<li class="paginate_button next disabled" aria-controls="DataTables_Table_0" tabindex="0" id="DataTables_Table_0_next">
	                                					<a href="#">后一页</a></li>
	                                				<li class="paginate_button last disabled" aria-controls="DataTables_Table_0" tabindex="0" id="DataTables_Table_0_last"><a href="#">尾页</a></li> -->
	                                			</ul>
	                                		</div>
	                                	</div>
	                                </div>
	                                </form>
								</pg:pager>
                            </div>
                        </div>
                    </div>
                </div>
               
            </div>
            <jsp:include page="/common/footer.jsp"></jsp:include>

        </div>
    </div>


    </div>

    <!-- Mainly scripts -->
    <script src="<%=path%>/js/jquery-2.1.1.min.js"></script>
    <script src="<%=path%>/js/bootstrap.min.js?v=3.4.0"></script>
    <script src="<%=path%>/js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="<%=path%>/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>

    <script src="<%=path%>/js/plugins/jeditable/jquery.jeditable.js"></script>

    <!-- Data Tables -->
    <script src="<%=path%>/js/plugins/dataTables/jquery.dataTables.js"></script>
    <script src="<%=path%>/js/plugins/dataTables/dataTables.bootstrap.js"></script>

    <!-- Custom and plugin javascript -->
    <script src="<%=path%>/js/hplus.js?v=2.2.0"></script>
    <script src="<%=path%>/js/plugins/pace/pace.min.js"></script>

    <!-- Page-Level Scripts -->
	<script>
		$(document).ready(function() {
			
			<%-- var dtable;//定义datatable的全局变量  
			$('.dataTables-example').dataTable({
				"language" : {
					"sLengthMenu" : "每页显示_MENU_ 条记录",
					"sZeroRecords" : "抱歉， 没有找到",
					"sInfo": "当前数据为从第 _START_ 到第 _END_ 条数据；总共有 _TOTAL_ 条记录",
					"sInfoEmpty" : "没有数据",
					"sInfoFiltered" : "(从 _MAX_ 条数据中检索)",
					"oPaginate" : {
						"sFirst" : "首页",
						"sPrevious" : "前一页",
						"sNext" : "后一页",
						"sLast" : "尾页"
					},
					"sZeroRecords" : "没有检索到数据",
					"sProcessing" : "<img src='<%=path%>/js/plugins/layer/skin/default/xubox_loading1.gif' />"
				},
				"sAjaxSource" : "<%=path%>/menu/doMenuList.do",  
				"bProcessing": true,   //加载数据时显示正在加载信息   
				"bFilter" : false,// 搜索栏  
				"bPaginate": true,  //是否分页。
				"bServerSide":true,//服务端处理分页
				"bLengthChange": false, //是否允许自定义每页显示条数.
				"sPaginationType" : "full_numbers", // 分页
				"iDisplayLength": 3,   //每页显示3条数据   
				"aoColumns":
		             [  
			      		{ "mData": "menuId", 'sClass':'left'},
			          	{ "mData": "menuName", 'sClass':'center'}, 
			          	{ "mData": "describes",'sClass':'left'},
			          	{ "mData": "sort", 'sClass':'left'},
			          	{ "mData": "imgurl", 'sClass':'left'}
		          	 ],
				
          	 
          	 "fnServerData" : function(sSource, aoData, fnCallback) {
                 $.ajax({
                   "type" : 'post',
                   "url" : sSource,
                   "dataType" : "json",
                   "data" : {
                     aoData : JSON.stringify(aoData)
                   },
                   "success" : function(resp) {
                	   console.info(resp);
                     fnCallback(resp);
                   }
                 });
           
               }
			}); --%>
			
// 			$('.dataTables-example').dataTable();


		});
	</script>


</body>

</html>
